<template >
<!-- 大数据可视化 -->
  <div class="demoXX">
    <div class="elmaindemo">
      <div class="rq">
		<div calss ="smalltitle">
			<el-card  id="SmaT2">
				<span class="B02">待分配作业范围</span>
				<img data-v-0aaa3cd8="" src="../../src/assets/范围广.png" alt="" class="img2"/>
				<span class="B03">取件待办</span>
				<img data-v-0aaa3cd8="" src="../../../../luoqing_tms_front_end/luoqing_tms_front_end/src/assets/取件待办.png" alt="" class="img3"/>
				<span class="B04">派件待办</span>
				<img data-v-0aaa3cd8="" src="../../../../luoqing_tms_front_end/luoqing_tms_front_end/src/assets/xiaohuoche.png" alt="" class="img4"/>
			</el-card> 
			<el-card  id="SmaT1">
				<div class="B01"><span>XX网点</span></div>
				<!-- <div class="B01"><span>北京省/北京市/昌平区/金燕龙</span></div> -->
				<div><img data-v-0aaa3cd8="" src="../../src/assets/网点管理.png" alt="" class="img1"/></div>
				<h1>TBBBBBBBBBBBBBBBBBBBBBBBBB</h1>
			</el-card> 
        </div>
		<el-card class="box-card" id="TB3">
			<span class="touA3">订单总量</span>
			<!-- 大数据可视化 -->
			<div id="mainA3" style="width: 610px;height:310px; position: relative;top: -46px;"></div>
		</el-card>  
		<el-card class="box-card" id="TBmap">
			<span class="touA3">订单分布</span>
			<!-- 大数据可视化 -->
			<div class="map-container" style="width: 680px; height: 250px" ref="myEchart" id="china_map"></div>
		</el-card>	
	

		<el-card class="box-card" id="TB2">
		<!-- 作业信息表格 -->
			<el-alert class="box-card" itemid="TB4">
				<!-- <el-descriptions title="" direction="vertical" :column="4" border>
				<el-descriptions-item label="用户名">10001</el-descriptions-item>
				<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
				<el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
				<el-descriptions-item label="备注">	<el-tag size="small">学校</el-tag></el-descriptions-item>
				<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
				</el-descriptions> -->
				<el-descriptions class="margin-top" title="" :column="4" direction="vertical">
				<el-descriptions-item label="取件任务">kooriookami</el-descriptions-item>
				<el-descriptions-item label="取件任务待派遣">145</el-descriptions-item>
				<el-descriptions-item label="取件任务已派遣">62</el-descriptions-item>
				<el-descriptions-item label="取件任务已完成">789</el-descriptions-item>
				<el-descriptions-item label="仓库任务">1665</el-descriptions-item>
				<el-descriptions-item label="已出库"> 678 号</el-descriptions-item>
				<el-descriptions-item label="已入库">789</el-descriptions-item>
				<el-descriptions-item label="特派任务">1665</el-descriptions-item>
				<el-descriptions-item label="特派任务待派遣"> 1188 号</el-descriptions-item>
				<el-descriptions-item label="派件任务未完成">1665</el-descriptions-item>
				<el-descriptions-item label="派件任务已完成"> 1188 号</el-descriptions-item>
				</el-descriptions>
			</el-alert>	

			<div class="touA2"><span>作业信息</span></div>
				<!-- 大数据可视化 -->
			<div ref="mychat" id="mainA2" class="mainBoxA"></div>

			<el-card class="box-card" id="">
				<el-descriptions class="margin-top" title="" :column="4" direction="vertical">
					<el-descriptions-item label="已出库">kooriookami</el-descriptions-item>
					<el-descriptions-item label="已入库">145</el-descriptions-item>
				</el-descriptions>
			</el-card>	
        </el-card>  

	  </div>
<!-------------- 以上是有用的------------------------------------ -->
    </div>
  </div>
</template>

<script>
import echarts from 'C:/Users/Admin/Desktop/luoqing_tms_front_end/luoqing_tms_front_end/node_modules/echarts'
require('C:/Users/Admin/Desktop/luoqing_tms_front_end/luoqing_tms_front_end/node_modules/echarts/map/js/china')
export default {
      mounted(){
		// 以下是地图
        let data = [
 			{ "name": "北京", "dataCount": [0, 1, 0, 0, 0, 0, 1], "id": "247" }, {
 			"name": "天津",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "248"
 		}, { "name": "河北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "249" }, {
 			"name": "山西",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "250"
 		}, { "name": "内蒙古", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "251" }, {
 			"name": "辽宁",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "252"
 		}, { "name": "吉林", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "253" }, {
 			"name": "黑龙江",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "254"
 		}, { "name": "上海", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "255" }, {
 			"name": "江苏",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "256"
 		}, { "name": "浙江", "dataCount": [0, 1, 0, 0, 0, 0, 0], "id": "257" }, {
 			"name": "安徽",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "258"
 		}, { "name": "福建", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "259" }, {
 			"name": "江西",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "260"
 		}, { "name": "山东", "dataCount": [14235, 820, 0, 35, 0, 0, 4], "id": "261" }, {
 			"name": "河南",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "262"
 		}, { "name": "湖北", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "263" }, {
 			"name": "湖南",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "264"
 		}, { "name": "广东", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "265" }, {
 			"name": "广西",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "266"
 		}, { "name": "海南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "267" }, {
 			"name": "重庆",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "268"
 		}, { "name": "四川", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "269" }, {
 			"name": "贵州",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "270"
 		}, { "name": "云南", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "271" }, {
 			"name": "西藏",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "272"
 		}, { "name": "陕西", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "273" }, {
 			"name": "甘肃",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "274"
 		}, { "name": "青海", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "275" }, {
 			"name": "宁夏",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "276"
 		}, { "name": "新疆", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "277" }, {
 			"name": "台湾",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "278"
 		}, { "name": "香港", "dataCount": [0, 0, 0, 0, 0, 0, 0], "id": "279" }, {
 			"name": "澳门",
 			"dataCount": [0, 0, 0, 0, 0, 0, 0],
 			"id": "280"
			}]
			let chinaGeoCoordMap ={
								'黑龙江': [127.9688, 45.368,1],
								'内蒙古': [110.3467, 41.4899,1],
								'吉林': [125.8154, 44.2584,1],
								'北京': [116.4551, 40.2539,2],
								'辽宁': [123.1238, 42.1216,1],
								'河北': [114.4995, 38.1006,1],
								'天津': [117.4219, 39.4189,1],
								'山西': [112.3352, 37.9413,1],
								'陕西': [109.1162, 34.2004,1],
								'甘肃': [103.5901, 36.3043,1],
								'宁夏': [106.3586, 38.1775,1],
								'青海': [101.4038, 36.8207,1],
								'新疆': [87.9236, 43.5883,1],
								'西藏': [91.11, 29.97,1],
								'四川': [103.9526, 30.7617,1],
								'重庆': [108.384366, 30.439702,1],
								'山东': [117.1582, 36.8701,1],
								'河南': [113.4668, 34.6234,1],
								'江苏': [118.8062, 31.9208,1],
								'安徽': [117.29, 32.0581,1],
								'湖北': [114.3896, 30.6628,1],
								'浙江': [119.5313, 29.8773,1],
								'福建': [119.4543, 25.9222,1],
								'江西': [116.0046, 28.6633,1],
								'湖南': [113.0823, 28.2568,1],
								'贵州': [106.6992, 26.7682,1],
								'云南': [102.9199, 25.4663,1],
								'广东': [113.12244, 23.009505,1],
								'广西': [108.479, 23.1152,1],
								'海南': [110.3893, 19.8516,1],
								'上海': [121.4648, 31.2891,1],
								'台湾': [120.991676054688, 24.7801149726563,1],
								'澳门': [113.33, 22.11,1],
								'香港': [114.15, 22.15,1]
			}
			for (let i=0;i<data.length;i++){
						var da = chinaGeoCoordMap[data[i].name];
						chinaGeoCoordMap[data[i].name]=[...da,...data[i].dataCount];
			}
			let chinaDatas = [
						[{
						name: '北京',
						value: 2
						}], [{
						name: '黑龙江',
						value: 1
						}], [{
						name: '内蒙古',
						value: 1
						}], [{
						name: '吉林',
						value: 1
						}], [{
						name: '辽宁',
						value: 1
						}], [{
						name: '河北',
						value: 1
						}], [{
						name: '天津',
						value: 1
						}], [{
						name: '山西',
						value: 1
						}], [{
						name: '陕西',
						value: 1
						}], [{
						name: '甘肃',
						value: 1
						}], [{
						name: '宁夏',
						value: 1
						}], [{
						name: '青海',
						value: 1
						}], [{
						name: '新疆',
						value: 1
						}], [{
						name: '西藏',
						value: 1
						}], [{
						name: '四川',
						value: 1
						}], [{
						name: '重庆',
						value: 1
						}], [{
						name: '山东',
						value: 1
						}], [{
						name: '河南',
						value: 1
						}], [{
						name: '江苏',
						value: 1
						}], [{
						name: '安徽',
						value: 1
						}], [{
						name: '湖北',
						value: 1
						}], [{
						name: '浙江',
						value: 1
						}], [{
						name: '福建',
						value: 1
						}], [{
						name: '江西',
						value: 1
						}], [{
						name: '湖南',
						value: 1
						}], [{
						name: '贵州',
						value: 1
						}], [{
						name: '广东',
						value: 1
						}], [{
						name: '广西',
						value: 1
						}], [{
						name: '云南',
						value: 1
						}], [{
						name: '海南',
						value: 1
						}], [{
						name: '上海',
						value: 1
						}], [{
						name: '台湾',
						value: 1
						}], [{
						name: '澳门',
						value: 1
						}], [{
						name: '香港',
						value: 1
						}]
			]
			let convertData = function (data) {
						var res = [];
						for (var i = 0; i < data.length; i++) {
						var dataItem = data[i];
						var fromCoord = [chinaGeoCoordMap[dataItem[0].name][0], chinaGeoCoordMap[dataItem[0].name][1]];
						var toCoord = [117.1582, 36.8701];
						if (fromCoord && toCoord) {
							res.push([{
							coord: fromCoord,
							value: dataItem[0].value
							}, {
							coord: toCoord,
							}]);
						}
						}
						return res;
			};
			let seriesA = []
			seriesA.push(
				{
				type: 'lines',
				zlevel: 1,
				effect: {
					show: true,
					period: 4, //箭头指向速度，值越小速度越快
					trailLength: 0.3, //特效尾迹长度[0,1]值越大，尾迹越长重
					symbol: 'pin', //箭头图标
					symbolSize: 8, //图标大小
					color: '#2a6fd9'
				},
				lineStyle: {
					normal: {
					color: '#003262',
					width: 1,//尾迹线条宽度
					opacity: .9, //尾迹线条透明度
					curveness: .3 //尾迹线条曲直度
					}
				},
				data: convertData(chinaDatas)
				},
				{
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				rippleEffect: { // 涟漪特效
					period: 2, // 动画时间，值越小速度越快
					brushType: 'fill', // 波纹绘制方式 stroke, fill
					scale: 6, // 波纹圆环最大限制，值越大波纹越大
					color: '#003262' // 涟漪的颜色，默认为散点的颜色。
				},
				label: {
					normal: {
					show: true,
					color: '#283c64',
					position: 'top', // 显示位置
					offset: [0, 0], // 偏移设置
					formatter: function (params) { // 圆环显示文字
						return params.data.name
					},
					fontSize: 13
					},
					emphasis: {
					show: false
					}
				},
				symbol: 'circle',
				symbolSize: function (val) {
					return 1 + val[2] * 5 // 圆环大小
				},
				itemStyle: {
				color: "#2a6fd9",
					shadowBlur: 4,
					shadowColor: "#2a6fd9",
				},
				data: chinaDatas.map(function (dataItem) {
					return {
					name: dataItem[0].name,
					value: chinaGeoCoordMap[dataItem[0].name],
					itemStyle: {
						color: "#2a6fd9",
					shadowBlur: 4,
					shadowColor: "#2a6fd9",
					}
					}
				})
				},
				//被攻击点
				{
				type: 'scatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				label: {
					normal: {
					show: false,
					position: 'right',
					color: 'red',
					formatter: '{b}',
					textStyle: {
						color: "red"
					}
					},
					emphasis: {
					show: true,
					color: "red"
					}
				},
				symbol: 'pin',
				symbolSize: 0,
				data: [{
					name: '山东',
					value: chinaGeoCoordMap['山东'].concat([10]),
				}],
				}
			);
			let option = {
				tooltip: {
					show: true,
					trigger: 'item',
					backgroundColor: '#2e65fd',
					borderColor: '#FFFFCC',
					showDelay: 0,
					hideDelay: 0,
					enterable: true,
					transitionDuration: 0,
					extraCssText: 'z-index:100',
					formatter: function (params, ticket, callback) {
						console.log(params)
						// 根据业务自己拓展要显示的内容
						var res = ''
						var name = params.name
						var value1 = params.value[params.seriesIndex + 3] || 0
						var value2 = params.value[params.seriesIndex + 4] || 0
						var value3 = params.value[params.seriesIndex + 5] || 0
						var value4 = params.value[params.seriesIndex + 6] || 0
						var value5 = params.value[params.seriesIndex + 7] || 0
						var value6 = params.value[params.seriesIndex + 8] || 0
						var value7 = params.value[params.seriesIndex + 9] || 0
						res = "<span style='color:#fff'>" + name + '</span>' +
								'<br/>' +
								'<i class="icon icon-xuesheng"></i> 学生：' + value1+
								'<br/>' +
								'<i class="icon icon-laoshi_huaban"></i> 老师：'+value2+
								'<br/>' +
								'<i class="icon icon-baoanxiehui"></i> 青企协：'+value3+
								'<br/>' +
								'<i class="icon icon-rencaizhengce"></i> 青年企业家：'+value4+
								'<br/>' +
								'<i class="icon icon-investmentinstitutions"></i> 十强产业：'+value5+
								'<br/>' +
								'<i class="icon icon-caozuoyaoqingjiabin"></i> 峰会嘉宾：'+value6+
								'<br/>' +
								'<i class="icon icon-rencai"></i> 高端人才：'+value7
						return res
					}
				},
					regions: [
					//隐藏南海
					{
					name: "南海诸岛",
					itemStyle: {
						normal: {
						borderColor: "red",
						borderWidth: 20, //设置外层边框
						opacity: 0, // 为 0 时不绘制该图形
						},
					},
					label: {
						show: false, // 隐藏文字
					},
					},
				],
				backgroundColor: "rgba(0, 0, 0, 0.1)",
				geo: {
				map: 'china',
				zoom: 1.5,
				roam: true, // 是否允许缩放
					itemStyle: {
					normal: {
						//地图便框设置
					borderColor: "#003262",
					borderWidth: 11, //设置外层边框
					},
					emphasis: {
					areaColor: "#003262",
					shadowColor: "#003262",
					},
					},
				itemStyle: {
					normal: {
					color: '', // 地图背景色
					borderColor: '#5ea8ff', // 省市边界线00fcff 516a89
					borderWidth: 1
					},
					emphasis: {
						color: '#81acff' // 悬浮背景
					}
				}
				},
				series:seriesA, //地图	
			}
			var optionA2 = {
				toolbox: {
					show: true,
					feature: {
					mark: { show: true }}
				},
				series: [
					{
					name: 'Nightingale Chart',
					type: 'pie',
					radius: [25, 80],
					center: ['50%', '50%'],
					roseType: 'area',
					itemStyle: {
						borderRadius: 5
					},
					data: [
						{ value: 7, name: '空载车' },
						{ value: 6, name: '半载车' },
						{ value: 3, name: '满载车' },
					]
					}
				],
             color: ['red', '#ee6666','#73c0de'], //车辆加载颜色
        	};

		// 指定作业信息配置项和数据
			var optionA3 = {
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                type: 'category',
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug','Jun', 'Jul', 'Aug',  ]
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                name: '红色住',
                type: 'bar',
				barWidth: "25%",
                data: [
                    190.0, 40.9, 170.0, 83.2, 25.6, 56.7, 135.6, 162.2, 110.6, 120.0, 50.4, 30.3
                ],
                markPoint: { //气球标图
                    data: [
                    { type: 'max', name: 'Max' },
                    { type: 'min', name: 'Min' },
					{ type: 'average', name:'average' }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }
                },
                
            ],
			 color: ['rgb(242, 102, 102)', 'rgb(91, 124, 254)']
            };

        // 目的地运输量  基于准备好的dom，初始化echarts实例
        var chartDom = document.getElementById('mainA3');
        var myChart = echarts.init(chartDom);
		 optionA3 && myChart.setOption(optionA3);
		// 车辆加载	
		var myChart = echarts.init(document.getElementById('mainA2'));	
		  	myChart.setOption(optionA2);
		// 地图		
        this.chinachart = echarts.init(document.getElementById('china_map'))
        this.chinachart.setOption(option)

    }
};
</script>

<style scoped>
/* -----------^OK ----------------------------------------------------------- */
.map-container{ background-color: rgb(26, 26, 68); position: relative;left: -13px; top: -18px;}
#TBmap{position: relative;top: -50px;position: relative;top: -343px; left: 667px;width: 637px;height: 276px;}
#TB3{position: relative;top: 60px; position: relative;top: -65px;left: 17px; width: 637px;height: 276px;}
#TB2{position: relative;top: -328px;left: 17px;width: 1288px;}
.mainBoxA{ width: 300px;  height: 260px;position: relative;left: 670px;}
.touA3{position: relative;top: -15px;left: -270px;}
.touA2{position: relative;top: -18px;left: -600px;}
.B04{position: relative;top: -15px;left: 93px;}
.B03{position: relative;top: -15px;left: 25px;}
.B02{position: relative;top: -15px;left: -22px;}
.B01{position: absolute;left: 90px;top: 55px;}
.img4{width: 70px;height: 70px;position: relative;left: -65px;top: 5px;}
.img3{width: 70px;height: 70px;position: relative;left: -120px;top: -3px;}
.img2{width: 75px;height: 70px;position: relative;left: -200px;top: -10px;}
.img1{width: 60px;height: 60px;position: relative;left: -270px; top: -3px;}
#SmaT2{width: 637px;height: 90px;position: relative;top: 12px;left: 667px;} 
#SmaT1{width: 637px;height: 90px;position: relative;top:-80px;left: 17px;}
.elmaindemo {
  position: relative;
  top: -40px;
  width: 100%;
  border: 10%;
  background-color: #f3f4f7;
}
/* -----------VOK ------------ */
</style>